<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lumina AI - 内容管理后台</title>
    <script src="../frontend/assets/js/tailwindcss.js"></script>
    <script>
        // Tailwind 主题配置（需在 CDN 脚本之前）
        tailwind = window.tailwind || {};
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFE45C',
                        secondary: '#FFE45C',
                        accent: '#10B981'
                    },
                    borderRadius: {
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px'
                    }
                }
            }
        };
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="../frontend/assets/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <header class="bg-white/95 backdrop-blur-md shadow-sm border-b border-gray-100 fixed top-0 left-0 right-0 z-40">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center">
                <button id="sidebarToggle" class="text-gray-500 hover:text-gray-700 mr-4">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-brain text-white text-sm"></i>
                    </div>
                    <h1 class="text-xl font-bold text-gray-800">Lumina AI 内容管理后台</h1>
                </div>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="text-sm text-gray-600">
                    <i class="fas fa-user mr-2"></i>
                    <span id="currentUsername">加载中...</span>
                </div>
                <button onclick="authManager.logout()" class="text-gray-500 hover:text-red-600 transition-colors">
                    <i class="fas fa-sign-out-alt mr-2"></i>退出
                </button>
            </div>
        </div>
    </header>

    <!-- Sidebar -->
    <aside id="sidebar" class="fixed left-0 top-16 h-full w-64 bg-white shadow-lg z-30">
        <nav class="p-6">
            <ul class="space-y-2">
                <li>
                    <a href="index.html" class="flex items-center px-4 py-3 text-yellow-700 bg-yellow-50 rounded-lg font-medium">
                        <i class="fas fa-tachometer-alt mr-3 text-yellow-600"></i>
                        仪表盘
                    </a>
                </li>
                <li>
                    <a href="/admin/blog/list.html" class="flex items-center px-4 py-3 text-gray-700 hover:text-yellow-700 hover:bg-yellow-50 rounded-lg transition-colors">
                        <i class="fas fa-blog mr-3 text-gray-500"></i>
                        博客管理
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-400 cursor-not-allowed opacity-50">
                        <i class="fas fa-book mr-3"></i>
                        词条管理
                        <span class="ml-auto text-xs bg-gray-200 text-gray-600 px-2 py-1 rounded">v2.0</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-400 cursor-not-allowed opacity-50">
                        <i class="fas fa-lightbulb mr-3"></i>
                        指令库管理
                        <span class="ml-auto text-xs bg-gray-200 text-gray-600 px-2 py-1 rounded">v2.0</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-400 cursor-not-allowed opacity-50">
                        <i class="fas fa-cog mr-3"></i>
                        系统设置
                        <span class="ml-auto text-xs bg-gray-200 text-gray-600 px-2 py-1 rounded">v2.0</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- Main Content -->
    <main id="mainContent" class="ml-64 pt-20 p-6 bg-gray-50 min-h-screen">
        <!-- Welcome Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-2">欢迎使用 Lumina AI 内容管理后台</h2>
            <p class="text-gray-600">管理您的 AI 学习社区内容，让知识传播更高效</p>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="p-3 bg-yellow-100 rounded-lg">
                        <i class="fas fa-blog text-yellow-700 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">博客总数</p>
                        <p class="text-2xl font-bold text-gray-900" id="blogCount">-</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="p-3 bg-green-100 rounded-lg">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">已发布</p>
                        <p class="text-2xl font-bold text-gray-900" id="publishedCount">-</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="p-3 bg-yellow-100 rounded-lg">
                        <i class="fas fa-edit text-yellow-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">草稿</p>
                        <p class="text-2xl font-bold text-gray-900" id="draftCount">-</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
                <div class="flex items-center">
                    <div class="p-3 bg-purple-100 rounded-lg">
                        <i class="fas fa-clock text-purple-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-600">最近更新</p>
                        <p class="text-2xl font-bold text-gray-900" id="lastUpdate">-</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">快速操作</h3>
                <div class="space-y-3">
                    <a href="/admin/blog/edit.html" class="flex items-center p-3 bg-yellow-50 hover:bg-yellow-100 rounded-lg transition-colors">
                        <i class="fas fa-plus-circle text-yellow-700 mr-3"></i>
                        <span class="text-yellow-800 font-medium">创建新博客</span>
                    </a>
                    <a href="/admin/blog/list.html" class="flex items-center p-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
                        <i class="fas fa-list text-green-600 mr-3"></i>
                        <span class="text-green-800 font-medium">管理博客列表</span>
                    </a>
                    <a href="../frontend/index.html" target="_blank" class="flex items-center p-3 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
                        <i class="fas fa-external-link-alt text-purple-600 mr-3"></i>
                        <span class="text-purple-800 font-medium">查看前端页面</span>
                    </a>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">系统状态</h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-600">认证状态</span>
                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">正常</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-600">数据同步</span>
                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">正常</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-gray-600">文件权限</span>
                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">正常</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">最近活动</h3>
            <div id="recentActivity" class="space-y-3">
                <!-- 由 dashboard.js 动态填充 -->
            </div>
        </div>
    </main>

    <script src="js/auth.js"></script>
    <script src="js/common.js"></script>
    <script src="js/dashboard.js"></script>
</body>
</html>
